import { useState, useEffect } from "react";
import reactLogo from "./assets/react.svg";
// import './App.css'
import areaData from "./areaData.json";
import { Cascader, Button } from "antd";
import { CnCascaderSelect } from "@cainiaofe/cn-ui"
import { convertToA} from '../b2a'

function App() {
  const [count, setCount] = useState(0);
  const [areaData1, setAreaData1] = useState([]);
  const [areaData2, setAreaData2] = useState([]);
  const [dataList, setDataList] = useState([]);
  useEffect(() => {
    console.log("init");
    setDataList(areaData)
    const xx = [
      "CN:北京市",
      "CN:天津市:市辖区:和平区",
      "CN:天津市:市辖区:河西区",
      "CN:天津市:市辖区:南开区",
      "CN:天津市:市辖区:河北区",
      "CN:天津市:市辖区:红桥区",
      "CN:天津市:市辖区:东丽区",
      "CN:天津市:市辖区:西青区",
      "CN:天津市:市辖区:津南区",
      "CN:天津市:市辖区:北辰区",
      "CN:天津市:市辖区:武清区",
      "CN:天津市:市辖区:宝坻区",
      "CN:天津市:市辖区:滨海新区",
      "CN:天津市:市辖区:宁河区",
      "CN:天津市:市辖区:静海区",
      "CN:天津市:市辖区:蓟州区",
      "CN:河北省",
      "CN:内蒙古自治区",
      "CN:山西省:太原市",
      "CN:山西省:大同市",
      "CN:山西省:阳泉市",
      "CN:山西省:晋城市",
      "CN:山西省:朔州市",
      "CN:山西省:晋中市",
      "CN:山西省:运城市",
      "CN:山西省:忻州市",
      "CN:山西省:临汾市",
      "CN:山西省:吕梁市",
      "CN:辽宁省:沈阳市",
      "CN:辽宁省:大连市",
      "CN:辽宁省:鞍山市",
      "CN:辽宁省:本溪市",
      "CN:辽宁省:丹东市",
      "CN:辽宁省:锦州市",
      "CN:辽宁省:营口市",
      "CN:辽宁省:阜新市",
      "CN:辽宁省:辽阳市",
      "CN:辽宁省:盘锦市",
      "CN:辽宁省:铁岭市",
      "CN:辽宁省:朝阳市",
      "CN:辽宁省:葫芦岛市",
      "CN:吉林省",
      "CN:黑龙江省",
      "CN:上海市",
      "CN:江苏省",
      "CN:浙江省",
      "CN:安徽省",
      "CN:福建省",
      "CN:江西省",
      "CN:山东省",
      "CN:河南省",
      "CN:湖北省",
      "CN:湖南省:长沙市",
      "CN:湖南省:株洲市",
      "CN:湖南省:衡阳市",
      "CN:湖南省:邵阳市",
      "CN:湖南省:岳阳市",
      "CN:湖南省:常德市",
      "CN:湖南省:张家界市",
      "CN:湖南省:益阳市",
      "CN:湖南省:郴州市",
      "CN:湖南省:永州市",
      "CN:湖南省:怀化市",
      "CN:湖南省:娄底市",
      "CN:湖南省:湘西土家族苗族自治州",
      "CN:广东省",
      "CN:广西壮族自治区",
      "CN:海南省",
      "CN:重庆市",
      "CN:甘肃省",
      "CN:青海省",
      "CN:宁夏回族自治区",
      "CN:新疆维吾尔自治区",
      "CN:四川省",
      "CN:贵州省",
      "CN:西藏自治区",
      "CN:陕西省"
    ]
    let cc = convertToA(xx)
    console.log('cc==>', cc)
    // setAreaData2(xx)
    setAreaData1(cc)
  }, []);

  const onChange = (value, selectOptions) => {
    console.log(value);
    let b = value.map(item => {
      return item[item.length - 1];
    })
    console.log('b', b);
    // console.log(selectOptions);
  };
  return (
    <div className="App">
      <Cascader
        style={{
          width: "100%",
        }}
        value={areaData1}
        options={areaData}
        onChange={(v) => {
          setAreaData1(v)
        }}
        multiple
        maxTagCount="responsive"
        // defaultValue={['CN:北京市:市辖区:东城区:东华门街道']}
        // defaultValue={[
        //   [
        //     "CN:北京市",
        //     "CN:北京市:市辖区",
        //     "CN:北京市:市辖区:东城区",
        //     "CN:北京市:市辖区:东城区:景山街道",
        //   ],
        //   [
        //     "CN:北京市",
        //     "CN:北京市:市辖区",
        //     "CN:北京市:市辖区:东城区",
        //     "CN:北京市:市辖区:东城区:交道口街道",
        //   ],
        // ]}
      />
      {/* <Cascader defaultValue={['CN:北京市', 'CN:北京市:市辖区', 'CN:北京市:市辖区:东城区', 'CN:北京市:市辖区:东城区:东华门街道']}options={areaData} onChange={onChange} /> */}
      <CnCascaderSelect
        multiple
        dataSource={dataList}
        value={areaData2}
        onChange={(v,d,e) => {
          // console.log(v,d,e);
          console.log(v);
          setAreaData2(v)
        }}
      />
      <Button type="primary">提交</Button>
    </div>
  );
}

export default App;
